<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Navigation</title>
    <link rel="stylesheet" href="navigation.css">
  </head>
  <body>
    <h1>Navigation</h1>
    
    <p>30, 45 and 90/45 Rule</p>
    
    <div id="container">
      <canvas id="canvas" width="300" height="300" class="center"></canvas>
    </div>
    <div>
      <form class="center">
      <table><tr><td>enter actual heading:</td><td colspan="3">
          <input id="now2" type="number" min="0" max="360" value="30"/></td></tr>
        <tr><td>enter inbound heading:</td><td colspan="3">
          <input id="target2" type="number" min="0" max="360" value="90"/></td></tr>
      <tr><td>actual heading:</td><td id="n">30</td><td id="now_color">&nbsp;</td></tr>
      <tr><td>inbound heading:</td><td id="t">90</td><td id="target_color">&nbsp;</td></tr>
      <tr><td>difference:</td><td id="diff"></td><tr>
      <tr><td>OBS:</td><td id="obs"></td><td id="obs_color">&nbsp;</td></tr>
      <tr><td>use heading now:</td><td id="n1"></td><td id="n1_color">&nbsp;</td></tr>
      <tr><td>use heading later:</td><td id="n2"></td><td id="n2_color">&nbsp;</td></tr></table>
      </form>
    </div>
    <script type="application/dart" src="web/navigation.dart"></script>
    <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>